<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('预算、预测、实际回款月汇总')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse" shiro:hasAnyRoles="admin,ccm,financial">
                <form id="formId">
                    <div class="select-list" >
                        <ul>
                            <li id="personName" shiro:hasAnyRoles="admin,ccm,financial">
                                <p>销售人员：</p>
                                <input type="text" name="personName" />
                            </li>
                            <li id="deptName" shiro:hasAnyRoles="admin,financial">
                                <p>所属部门：</p>
                                <input type="text" name="deptName" />
                            </li>
                            <li id="contractName">
                                <p>项目名称：</p>
                                <input type="text" name="contractName" />
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">

                <a class="btn btn-success" onclick="initPersonal()" shiro:hasAnyRoles="admin,ccm,sale,financial">
                    <i class="fa fa-plus"></i> 个人级
                </a>
                <a class="btn btn-success" onclick="initDept()" shiro:hasAnyRoles="admin,ccm,financial">
                    <i class="fa fa-plus"></i> 部门级
                </a>
                <a class="btn btn-success" onclick="initTotal()" shiro:hasAnyRoles="admin,financial" >
                    <i class="fa fa-plus"></i> 公司级
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped table-responsive">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "system/monthly";
        var today = new Date();
        var month = today.getMonth() + 1;
        var columns = [];
        function initTotal(){
            columns = [];
            $.table.destroy();
            showSearchList('total');
            for(let i=0; i<=13; i++){
                let column = new Object();
                if(i==0){
                    column.field = 'type';
                    column.title = '公司级';
                }else if(i<13){
                    column.field = i;
                    column.title = 'M' + i;
                    if( i == month){
                        column.cellStyle = {css:{'background':'#F0E68C'}};
                    }
                }else{
                    column.field = i;
                    column.title = '合计';
                }
                columns.push(column);
            }
            var options = {
                url: prefix + "/totalList",
                exportUrl: prefix + "/export",
                modalName: "预算、预测、实际回款月汇总",
                rowStyle: rowStyle,//通过自定义函数设置行样式
                pagination: false,
                fixedColumns: true,
                fixedNumber: 1,
                search: false,
                showSearch:false,
                showFooter: true,
                showToggle: false,
                showExport: true,
                exportOptions : {
                    ignoreColumn: [],
                    fileName : '预算预测回款月汇总',
                    worksheetName : '预算预测回款月汇总（公司级）'
                },
                columns: columns
            };
            $.table.init(options);
        }

        function getTotal(){
            var data= $('#bootstrap-table').bootstrapTable('getData',{useCurrentPage:true,includeHiddenRows:true});
            var totalBudget = 0;
            var totalPredict = 0;
            var totalActual = 0;
            for(let item in data[2]){
                if(!isNaN(item)){
                    totalBudget += data[0][item];
                    if(item < month){
                        totalPredict += data[2][item];
                    } else {
                        totalPredict += data[1][item];
                    }
                    totalActual += data[2][item];
                }
                var totalColumn = {
                    field : 'total',
                    title : '合计',
                    formatter : function(value, row, index){
                        if(index == 0){
                            return totalBudget;
                        }
                        if(index == 1){
                            return totalPredict;
                        }
                        if(index == 2){
                            return totalActual;
                        }
                        if(index == 3){
                            if(totalActual == 0 || totalBudget == 0) {
                                return '0.00%';
                            } else {
                                var budgetPercent = totalActual/totalBudget/100;
                                return budgetPercent.toFixed(2);
                            }
                        }
                        if(index == 4){
                            if(totalActual == 0 || totalBudget == 0) {
                                return '0.00%';
                            } else {
                                var predictPercent = totalActual/totalPredict/100;
                                return predictPercent.toFixed(2);
                            }
                        }
                    }
                };
            }
            columns.push(totalColumn);
            console.log(columns);
            $("#bootstrap-table").bootstrapTable('refreshOptions', {
                columns: columns
            });
        }

        function initPersonal(){
            columns = [];
            $.table.destroy();
            showSearchList('personal');
            for(let i=-1; i<=13; i++){
                let column = new Object();
                if(i==-1){
                    column.field = 'name';
                    column.title = '名称';
                }else if(i==0){
                    column.field = 'type';
                    column.title = '个人级';
                }else if(i<13){
                    column.field = i;
                    column.title = 'M' + i;
                    if( i == month){
                        column.cellStyle = {css:{'background':'#F0E68C'}};
                    }
                } else {
                    column.field = i;
                    column.title = '合计';
                }
                columns.push(column);
            }
            var options = {
                url: prefix + "/personalList",
                exportUrl: prefix + "/export",
                modalName: "预算、预测、实际回款月汇总",
                rowStyle: rowStyle,//通过自定义函数设置行样式
                pagination: false,
                showSearch:true,
                showFooter: true,
                showToggle: false,
                showExport: true,
                exportOptions : {
                    ignoreColumn: [],
                    fileName : '预算预测回款月汇总',
                    worksheetName : '预算预测回款月汇总（个人级）'
                },
                columns: columns,
                onLoadSuccess: function (data) {
                    mergeRowspans('#bootstrap-table',0,['name'],5,data.total);
                }
            };
            $.table.init(options);
        }

        function initDept(){
            columns = [];
            $.table.destroy();
            showSearchList('dept');
            for(let i=-1; i<=13; i++){
                let column = new Object();
                if(i==-1){
                    column.field = 'name';
                    column.title = '名称';
                }else if(i==0){
                    column.field = 'type';
                    column.title = '部门级';
                }else if(i<13){
                    column.field = i;
                    column.title = 'M' + i;
                    if( i == month){
                        column.cellStyle = {css:{'background':'#F0E68C'}};
                    }
                } else {
                    column.field = i;
                    column.title = '合计';
                }
                columns.push(column);
            }
            var options = {
                url: prefix + "/deptList",
                exportUrl: prefix + "/export",
                modalName: "预算、预测、实际回款月汇总",
                rowStyle: rowStyle,//通过自定义函数设置行样式
                pagination: false,
                showSearch:true,
                showFooter: true,
                showToggle: false,
                showExport: true,
                exportOptions : {
                    ignoreColumn: [],
                    fileName : '预算预测回款月汇总',
                    worksheetName : '预算预测回款月汇总（部门级）'
                },
                columns: columns,
                onLoadSuccess: function (data) {
                    mergeRowspans('#bootstrap-table',0,['name'],5,data.total);
                }
            };
            $.table.init(options);
        }
        function rowStyle(row, index) {
            var classes = ['active', 'success', 'info', 'warning', 'danger'];
            if ((index + 1) % 5 === 0 || (index + 2) % 5 === 0) {
                return {
                    classes: classes[1]
                };
            }
            return {};
        }

        function mergeRowspans(targetTable, merIndex,fieldArr,rowSum,totalRow) {
            var count = totalRow/rowSum;
            for (var j = 0; j < count; j++){
                for (var i = 0;i < fieldArr.length;i++){
                    $(targetTable).bootstrapTable('mergeCells', {index: j*rowSum, field: fieldArr[i], rowspan: rowSum});
                }
            }
        }

        function showSearchList(id){
            if(id == 'total'){
                $('.search-collapse').hide();
            }else if(id == 'dept'){
                $('.search-collapse').show();
                $('#deptName').show();
                $('#personName').hide();
                $('#contractName').hide();
            }else if(id == 'personal'){
                $('.search-collapse').show();
                $('#deptName').hide();
                $('#personName').show();
                $('#contractName').hide();
            }else if(id == 'contract'){
                $('.search-collapse').show();
                $('#deptName').hide();
                $('#personName').hide();
                $('#contractName').show();
            }
        }

        $(function() {
            initPersonal();
            //getTotal();
        });
    </script>
</body>
</html>